<template>
  <div class="">
    <img src="../../assets/image/avatr.jpg" />
    <ul class="menu">
      <li class="el-icon-chat-square" :class="{activate,nonactivate}" @click="navTo('/box')"></li>
      <li class="el-icon-user" @click="navTo('/contact')"></li>
      <li class="el-icon-news" ></li>
      <li class="el-icon-folder-opened" ></li>
      <li class="el-icon-bangzhu"></li>
    </ul>
  </div>
</template>

<script>
import Box from "./box.vue";
export default {
  name: "sidebar",
  props: {},
  components: {
    Box
  },
  data() {
    return {
      activate: true,
      nonactivate:false,
    }
  },
  computed: {},
  watch: {
      $router(){
          alert('roiu')
      }
  },
  created() {},
  mounted() {},
  methods: {
      navTo(path){
          console.log(path)
          this.$router.push(path)
          this.activate = !(this.activate)
          this.nonactivate = !(this.nonactivate)
      }
  },
};
</script>
<style scoped>
ul {
  margin: 0 0;
  padding: 0 0;
}

ul li {
  font-size: 25px;
  margin-top: 20px;
  display: block;
  list-style: none;
}


ul .activate{
    color: green;
}

img {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  text-align: center;
}
</style>